Angular Material এর Stepper কম্পোনেন্ট ব্যবহারকারীদের ধাপে ধাপে কাজ করতে সহায়তা করে। এটি বিশেষ করে দীর্ঘ ফর্ম বা প্রক্রিয়া পরিচালনা করার ক্ষেত্রে সহায়ক, যেখানে বিভিন্ন ধাপ (steps) সম্পূর্ণ করতে হয়। Stepper কম্পোনেন্ট সাধারণত বিভিন্ন ধাপে ফর্ম, কনফিগারেশন বা অন্যান্য প্রক্রিয়া গাইড করার জন্য ব্যবহৃত হয়।
Angular Material এর MatStepper এবং MatStep কম্পোনেন্টগুলো ব্যবহার করে Stepper তৈরি করা যায়, যা Material Design এর গাইডলাইন অনুসরণ করে একটি সোজা এবং ইন্টারেকটিভ অভিজ্ঞতা প্রদান করে।
প্রথমে, আপনাকে MatStepperModule এবং ReactiveFormsModule (যদি আপনি Reactive Forms ব্যবহার করতে চান) অথবা FormsModule (যদি আপনি Template-driven Forms ব্যবহার করতে চান) মডিউলটি ইমপোর্ট করতে হবে।
import { MatStepperModule } from '@angular/material/stepper';
import { ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
MatStepperModule,
ReactiveFormsModule,
MatButtonModule,
],
})
export class AppModule { }
Angular Material স্টেপার কম্পোনেন্টের মধ্যে MatStepper এবং MatStep ব্যবহৃত হয়। MatStepper মূল কনটেইনার এবং MatStep প্রতিটি ধাপ বা স্টেপ নির্দেশ করে।
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Step 1</ng-template>
<p>Step 1 content goes here.</p>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Step 2</ng-template>
<p>Step 2 content goes here.</p>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Step 3</ng-template>
<p>Step 3 content goes here.</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="onSubmit()">Submit</button>
</div>
</mat-step>
</mat-horizontal-stepper>
এখানে:
linear অ্যাট্রিবিউটটি ব্যবহারকারীর জন্য ধাপগুলো সিকোয়েন্স অনুযায়ী পূর্ণ করতে বাধ্য করবে।import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-stepper',
templateUrl: './stepper.component.html',
styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
isLinear = true;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
onSubmit() {
alert('Form submitted!');
}
}
এখানে, আমরা দুটি ফর্ম গ্রুপ তৈরি করেছি:
ফর্মের জন্য Validators.required ব্যবহার করা হয়েছে, যা ব্যবহারকারীকে ফিল্ডগুলো পূর্ণ করার জন্য বাধ্য করবে।
Angular Material এর স্টেপার এর ডিফল্ট স্টাইলিং সরবরাহ করে, তবে আপনি চাইলে এটি কাস্টমাইজ করতে পারেন।
mat-stepper {
background-color: #f5f5f5;
border-radius: 10px;
padding: 20px;
}
mat-step {
margin-bottom: 20px;
}
এটি স্টেপার এবং স্টেপগুলোর মধ্যে অতিরিক্ত মার্জিন এবং প্যাডিং যুক্ত করবে।
Angular Material স্টেপারটি horizontal এবং vertical উভয়ভাবে ব্যবহার করা যায়।
<mat-vertical-stepper [linear]="isLinear" #stepper>
<!-- Same structure as horizontal stepper -->
</mat-vertical-stepper>
এখানে mat-vertical-stepper ব্যবহার করলে স্টেপারটি vertical হিসেবে প্রদর্শিত হবে।
আপনি শর্তের ভিত্তিতে স্টেপগুলো গেট করতে পারেন। উদাহরণস্বরূপ, একটি স্টেপ শুধুমাত্র অন্য একটি স্টেপ পূর্ণ হলে প্রবেশযোগ্য হবে।
this.firstFormGroup.valueChanges.subscribe(() => {
this.stepper.next();
});
এখানে valueChanges ব্যবহার করে আমরা ফর্মের পরিবর্তন ট্র্যাক করতে পারি এবং প্রয়োজনে পরবর্তী ধাপে যেতে পারি।
Angular Material Stepper একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ উপাদান, যা আপনাকে অ্যাপ্লিকেশনের বিভিন্ন ধাপ পরিচালনা করতে সহায়তা করে। এটি বিভিন্ন ধাপের কনটেন্ট বা ফর্ম সাজানোর জন্য খুবই উপযোগী এবং linear এবং non-linear স্টেপগুলির মধ্যে চলাচল করার সুযোগ দেয়। আপনি Reactive Forms এর মাধ্যমে স্টেপারের প্রতিটি ধাপের মান কাস্টমাইজ করতে পারেন এবং CSS দিয়ে এর স্টাইলিং পরিবর্তন করতে পারেন।
Angular Material এ Stepper কম্পোনেন্টটি একটি দুর্দান্ত উপাদান যা ধাপে ধাপে তথ্য প্রদান করার জন্য ব্যবহৃত হয়। এটি সাধারণত একটি দীর্ঘ ফর্ম বা প্রক্রিয়া পরিচালনা করতে সহায়ক, যেখানে ব্যবহারকারী একের পর এক ধাপে যেতে পারেন। Stepper কম্পোনেন্টটি লিনিয়ার (Linear) এবং নন-লিনিয়ার (Non-Linear) দুটি মোডে ব্যবহার করা যেতে পারে।
প্রথমে MatStepperModule ইমপোর্ট করতে হবে, যেটি Angular Material এর stepper কম্পোনেন্ট ব্যবহার করার জন্য প্রয়োজনীয় মডিউল।
app.module.ts ফাইলে প্রয়োজনীয় মডিউল ইমপোর্ট করাimport { MatStepperModule } from '@angular/material/stepper';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
MatStepperModule,
FormsModule,
ReactiveFormsModule
]
})
export class AppModule { }
লিনিয়ার স্টেপার এমন একটি স্টেপার যেখানে ব্যবহারকারী একের পর এক ধাপে যাবে এবং পরবর্তী ধাপে যাওয়ার আগে পূর্ববর্তী ধাপ সম্পূর্ণ করতে হবে।
<mat-vertical-stepper [linear]="true" #stepper>
<mat-step label="Step 1">
<p>Step 1 content goes here</p>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Step 2">
<p>Step 2 content goes here</p>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Step 3">
<p>Step 3 content goes here</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Step 4">
<p>Step 4 content goes here</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="finish()">Finish</button>
</mat-step>
</mat-vertical-stepper>
এখানে:
নন-লিনিয়ার স্টেপার এমন একটি স্টেপার যেখানে ব্যবহারকারী যেকোনো ধাপে সরাসরি যেতে পারবেন, এবং পূর্ববর্তী ধাপগুলি সম্পূর্ণ করার প্রয়োজন নেই।
<mat-horizontal-stepper [linear]="false" #stepper>
<mat-step label="Step 1">
<p>Step 1 content goes here</p>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Step 2">
<p>Step 2 content goes here</p>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Step 3">
<p>Step 3 content goes here</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Step 4">
<p>Step 4 content goes here</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="finish()">Finish</button>
</mat-step>
</mat-horizontal-stepper>
এখানে:
Angular Material এর Stepper কম্পোনেন্টটি সহজেই কাস্টমাইজ করা যায়, যেমন:
mat-stepper {
margin: 20px;
}
mat-step {
background-color: #f0f0f0;
border-radius: 8px;
padding: 15px;
}
mat-stepper .mat-step-header {
font-size: 18px;
color: #333;
}
এটি mat-stepper এর ডিজাইন এবং স্টাইল পরিবর্তন করবে, যাতে আপনি আপনার অ্যাপ্লিকেশনের থিমের সাথে মানানসই করতে পারেন।
আপনি যদি স্টেপার কম্পোনেন্টের সাথে Reactive Forms ব্যবহার করতে চান, তবে আপনি FormGroup এবং FormControl ব্যবহার করে প্রতিটি ধাপের ফর্ম কনট্রোল করতে পারেন।
<mat-horizontal-stepper [formGroup]="stepperForm">
<mat-step [stepControl]="stepperForm.get('step1')">
<p>Step 1 content goes here</p>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step [stepControl]="stepperForm.get('step2')">
<p>Step 2 content goes here</p>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step [stepControl]="stepperForm.get('step3')">
<p>Step 3 content goes here</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</mat-step>
</mat-horizontal-stepper>
এখানে:
FormGroup যেটি সকল ধাপের জন্য ফর্ম কনট্রোল সংরক্ষণ করবে।Angular Material Stepper কম্পোনেন্টটি একটি শক্তিশালী টুল, যা লিনিয়ার এবং নন-লিনিয়ার ধাপের মাধ্যমে ব্যবহারকারীদের একটি সহজ এবং কার্যকর ফর্ম পূরণ বা প্রক্রিয়া সম্পন্ন করার সুযোগ প্রদান করে। লিনিয়ার স্টেপারের মাধ্যমে ধাপে ধাপে একের পর এক যেতে হলে, নন-লিনিয়ার স্টেপারের মাধ্যমে ব্যবহারকারী যেকোনো ধাপে চলে যেতে পারেন। কাস্টমাইজেশন এবং ফর্ম ব্যবহারের মাধ্যমে এই কম্পোনেন্টের ব্যবহার আরও শক্তিশালী এবং ইউজার-বান্ধব হতে পারে।
Angular Material এর MatStepper কম্পোনেন্ট একটি স্টেপ-বাই-স্টেপ ফর্ম বা প্যানেল প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত ধাপে ধাপে প্রক্রিয়া সম্পাদন করতে যেমন নিবন্ধন ফর্ম, পেমেন্ট গেটওয়ে বা প্রোফাইল সেটিংসে ব্যবহার করা হয়। MatStepper ব্যবহারকারীদের প্রক্রিয়াটি একটি নির্দিষ্ট অর্ডারে সম্পন্ন করতে সহায়তা করে, যেখানে তারা প্রতিটি ধাপে যেতে পারেন এবং প্রয়োজন হলে পেছনে ফিরে আসতেও পারেন।
এই টিউটোরিয়ালে, আমরা Angular Material MatStepper কম্পোনেন্টের সাথে একটি কাস্টম টেমপ্লেট তৈরি এবং কাস্টমাইজেশন দেখবো।
প্রথমে MatStepperModule, MatInputModule, এবং ReactiveFormsModule মডিউলগুলি আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।
import { MatStepperModule } from '@angular/material/stepper';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
MatStepperModule,
MatInputModule,
MatButtonModule,
ReactiveFormsModule
],
...
})
export class AppModule { }
এখানে আমরা একটি সিম্পল স্টেপার কম্পোনেন্ট তৈরি করবো, যেখানে প্রতিটি স্টেপ একটি ইনপুট ফিল্ড থাকবে এবং পরবর্তী স্টেপে যাওয়ার জন্য একটি বাটন থাকবে।
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step label="Step 1">
<form [formGroup]="firstFormGroup">
<mat-form-field>
<input matInput placeholder="First name" formControlName="firstName" required>
</mat-form-field>
<div>
<button mat-button matStepperNext [disabled]="!firstFormGroup.valid">Next</button>
</div>
</form>
</mat-step>
<mat-step label="Step 2">
<form [formGroup]="secondFormGroup">
<mat-form-field>
<input matInput placeholder="Last name" formControlName="lastName" required>
</mat-form-field>
<div>
<button mat-button matStepperNext [disabled]="!secondFormGroup.valid">Next</button>
<button mat-button matStepperPrevious>Back</button>
</div>
</form>
</mat-step>
<mat-step label="Step 3">
<p>You are now done!</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="finish()">Finish</button>
</div>
</mat-step>
</mat-horizontal-stepper>
এই উদাহরণে, আমরা একটি horizontal stepper তৈরি করেছি, যেখানে ৩টি স্টেপ রয়েছে। প্রথম দুটি স্টেপে ইনপুট ফিল্ড ব্যবহার করা হয়েছে এবং শেষ স্টেপে একটি "Done" বার্তা এবং ফিনিশ বাটন রয়েছে।
[linear]="isLinear": এটি ডেটার ভ্যালিডেশন ভিত্তিকভাবে পরবর্তী স্টেপে যাওয়ার জন্য ডিফল্টভাবে লিনিয়ার ফ্লো সেট করে।matStepperNext: এটি পরবর্তী স্টেপে যাওয়ার জন্য ব্যবহৃত হয়।matStepperPrevious: এটি পূর্ববর্তী স্টেপে ফিরে যাওয়ার জন্য ব্যবহৃত হয়।এখন, আমাদের ফর্মগুলির জন্য ফর্ম গ্রুপ তৈরি করতে হবে। আমরা ReactiveFormsModule ব্যবহার করছি, তাই প্রথমে ফর্ম গ্রুপ তৈরি করা হবে।
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-stepper',
templateUrl: './stepper.component.html',
styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements OnInit {
isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
ngOnInit() {
this.firstFormGroup = new FormGroup({
firstName: new FormControl('', Validators.required),
});
this.secondFormGroup = new FormGroup({
lastName: new FormControl('', Validators.required),
});
}
finish() {
alert('You have completed the steps!');
}
}
firstFormGroup এবং secondFormGroup: ফর্মের জন্য দুটি গ্রুপ তৈরি করা হয়েছে, যেখানে প্রত্যেকটি ইনপুট ফিল্ডের জন্য FormControl এবং Validators ব্যবহার করা হয়েছে।finish(): শেষ স্টেপে "Finish" বাটনে ক্লিক করার পর একটি অ্যালার্ট মেসেজ দেখাবে।এখন আপনি MatStepper কম্পোনেন্টের কাস্টম স্টাইল এবং থিমিং করতে পারেন। Angular Material এর থিমিং সিস্টেম ব্যবহার করে আপনি এই স্টেপার কম্পোনেন্টের স্টাইল কাস্টমাইজ করতে পারবেন।
mat-stepper {
background-color: #f9f9f9;
padding: 20px;
}
mat-step {
padding: 10px;
background-color: #fff;
border-radius: 5px;
}
mat-stepper mat-step-header {
font-weight: bold;
}
button.mat-button {
margin-top: 10px;
}
এখানে, স্টেপার কম্পোনেন্টের জন্য ব্যাকগ্রাউন্ড এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
MatStepper কাস্টমাইজেশনের জন্য, আপনি স্টেপের লেবেল, কন্টেন্ট, এবং বাটনের স্টাইল কাস্টমাইজ করতে পারেন। এখানে কাস্টম টেমপ্লেটের একটি উদাহরণ দেওয়া হলো যেখানে আপনি প্রতিটি স্টেপের লেবেল এবং কন্টেন্ট পরিবর্তন করতে পারেন।
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [label]="step1Label">
<p>This is the first step</p>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step [label]="step2Label">
<p>This is the second step</p>
<button mat-button matStepperNext>Next</button>
<button mat-button matStepperPrevious>Back</button>
</mat-step>
<mat-step [label]="step3Label">
<p>You are done!</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="finish()">Finish</button>
</mat-step>
</mat-horizontal-stepper>
export class StepperComponent implements OnInit {
isLinear = true;
step1Label = 'Step 1: Personal Information';
step2Label = 'Step 2: Address';
step3Label = 'Step 3: Confirmation';
ngOnInit() {}
finish() {
alert('You have completed the steps!');
}
}
এখানে, প্রতিটি স্টেপের লেবেল কাস্টমাইজ করা হয়েছে এবং ব্যবহারকারী স্টেপের মাধ্যমে এগোতে পারবে।
Angular Material MatStepper একটি অত্যন্ত কার্যকরী কম্পোনেন্ট যা অ্যাপ্লিকেশনে ধাপে ধাপে ফর্ম বা কাজ সম্পাদন করতে সহায়ক। এটি সহজেই কাস্টমাইজ করা যায় এবং বিভিন্ন ধরনের ফর্ম, প্রক্রিয়া বা সেটআপে ব্যবহৃত হতে পারে। MatStepper এর মাধ্যমে আপনি একটি সুন্দর এবং ইন্টারঅ্যাকটিভ ইউজার এক্সপেরিয়েন্স তৈরি করতে পারবেন যা ব্যবহারকারীদের সাহায্য করবে ধাপে ধাপে তাদের কাজ সম্পন্ন করতে।
Angular Material এর MatStepper কম্পোনেন্ট একটি অত্যন্ত শক্তিশালী টুল, যা স্টেপ ফর্ম তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের একাধিক ধাপের মাধ্যমে ডেটা পূরণ করার জন্য সহায়তা করে। প্রতিটি ধাপে ইনপুট বা ফর্ম ফিল্ড থাকতে পারে, এবং একটি ধাপ থেকে অন্য ধাপে ন্যাভিগেট করতে সহায়তা করে। Angular Material স্টেপার কম্পোনেন্টে আপনি স্টেপ ভ্যালিডেশন এবং ন্যাভিগেশন সম্পূর্ণ কাস্টমাইজ করতে পারেন।
প্রথমে, MatStepperModule, ReactiveFormsModule, এবং MatInputModule ইমপোর্ট করতে হবে আপনার app.module.ts ফাইলে:
import { MatStepperModule } from '@angular/material/stepper';
import { ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
@NgModule({
imports: [
MatStepperModule,
ReactiveFormsModule,
MatInputModule
]
})
export class AppModule {}
এখন আপনি MatStepper ব্যবহার করে একটি স্টেপার তৈরি করতে পারবেন। নীচে একটি সাধারণ স্টেপ ফর্ম উদাহরণ দেওয়া হয়েছে:
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Personal Information</ng-template>
<mat-form-field>
<mat-label>First name</mat-label>
<input matInput formControlName="firstName">
</mat-form-field>
<mat-form-field>
<mat-label>Last name</mat-label>
<input matInput formControlName="lastName">
</mat-form-field>
<div>
<button mat-button matStepperNext [disabled]="!firstFormGroup.valid">Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Address</ng-template>
<mat-form-field>
<mat-label>Street Address</mat-label>
<input matInput formControlName="street">
</mat-form-field>
<mat-form-field>
<mat-label>City</mat-label>
<input matInput formControlName="city">
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext [disabled]="!secondFormGroup.valid">Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are done</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="onSubmit()">Submit</button>
</div>
</mat-step>
</mat-horizontal-stepper>
এখানে:
ReactiveFormsModule ব্যবহার করে ফর্ম কন্ট্রোল এবং স্টেপ ভ্যালিডেশন কনফিগার করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-stepper',
templateUrl: './stepper.component.html',
styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
isLinear = true;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
street: ['', Validators.required],
city: ['', Validators.required]
});
}
onSubmit() {
// ফর্ম সাবমিট করার লজিক
console.log("Form Submitted!");
}
}
এখানে:
Angular Material Stepper আপনাকে প্রতিটি স্টেপের মধ্যে Next এবং Back বোতাম দ্বারা নেভিগেট করার সুযোগ দেয়। এই বোতামগুলো matStepperNext এবং matStepperPrevious ডিরেকটিভ দ্বারা নিয়ন্ত্রিত হয়।
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
এছাড়া, disabled অ্যাট্রিবিউট ব্যবহার করে আপনি প্রতিটি স্টেপের জন্য ভ্যালিডেশন নিশ্চিত করতে পারেন।
<button mat-button matStepperNext [disabled]="!firstFormGroup.valid">Next</button>
এখানে, firstFormGroup.valid শুধুমাত্র তখনই Next বোতামটি সক্রিয় করবে যখন প্রথম ধাপের ইনপুট ফিল্ডগুলির মান সঠিক হবে।
Angular Material Stepper একটি শক্তিশালী এবং ব্যবহারকারীবান্ধব টুল, যা ব্যবহারকারীকে একাধিক ধাপে ডেটা পূর্ণ করতে সহায়তা করে। এটি সহজেই Reactive Forms এর মাধ্যমে স্টেপ ভ্যালিডেশন এবং ন্যাভিগেশন কাস্টমাইজ করার সুবিধা দেয়। Next এবং Back বোতামগুলির মাধ্যমে স্টেপের মধ্যে নেভিগেট করা সহজ, এবং স্টেপের উপর ভিত্তি করে ভ্যালিডেশন সরবরাহ করা যায়, যা ইউজার ইন্টারফেসকে আরও কার্যকরী এবং সুন্দর করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
